<div>
  <div class="d-input">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="工单号" name="工单号" class="me-2"
      [(ngModel)]="JobOrderNum">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="产品编码" name="产品编码" class="me-2"
      [(ngModel)]="PartNum">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="产品名称" name="产品名称" class="me-2"
      [(ngModel)]="PartName">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="工序编码" name="工序编码" class="me-2"
      [(ngModel)]="ProcessNum">
    <input dTextInput style="width: 180px;" [error]="false" placeholder="工序名称" name="工序名称" class="me-2"
      [(ngModel)]="ProcessName">
    <d-button id="primaryBtn" (click)="search2()"><i class="icon icon-filter-o me-2"></i>查询</d-button>
    <d-button bsStyle="common" style="margin-left: 8px" (click)="reset()"><i
        class="icon icon-refresh me-2"></i>重置</d-button>
  </div>
  <div class="mt-3">
    <d-data-table [dataSource]="tableData" [lazy]="true" [scrollable]="true" [fixHeader]="true" [maxHeight]="'400px'"
      [tableWidthConfig]="tableWidthConfig" (checkAllChange)="getCheckedRows()" (rowCheckChange)="getCheckedRows()"
      [tableOverflowType]="'auto'" [scrollable]="true" [resizeable]="true">
      <thead dTableHead [checkable]="true">
        <tr dTableRow>
          <th dHeadCell *ngFor="let colOption of dataTableOptions.columns" [title]="colOption.header">
            {{colOption.header}}</th>
        </tr>
      </thead>
      <tbody dTableBody>
        <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
          <tr>
            <td dTableCell>
              <d-checkbox [disabled]="false" [showAnimation]="true" [ngModelOptions]="{ standalone: true }"
                [ngModel]="rowItem.$checked && (rowItem.$checked || rowItem.$halfChecked)" dTooltip
                [showGlowStyle]="false"
                (ngModelChange)="onRowCheckChange($event, rowIndex, nestedIndex, rowItem)"></d-checkbox>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.jobOrderNum">{{rowItem.jobOrderNum}}</span>
            </td>
            <td dTableCell>
              <span dTooltip
                [content]="rowItem.jobOrderNum+'-'+rowItem.processNumber">{{rowItem.jobOrderNum}}-{{rowItem.processNumber|
                padNumber}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem?.processNum">{{rowItem.processNum}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem?.processName">{{rowItem.processName}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem?.productNum">{{rowItem.productNum}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem?.productName">{{rowItem.productName}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem?.partType">{{rowItem.partType}}</span>
            </td>
            <td dTableCell>
              <span *ngFor="let a of rowItem.users; let isLast=last" dTooltip [content]="a.name&&isLast ? '' : '，'">{{a.name}}{{isLast ? '' : '，'}}</span>
            </td>
            <td dTableCell>
              <span *ngIf="rowItem.isAssign" class="me-3" dTooltip [content]="'已派工'">
                <div style="display: inline-block;">
                  <d-badge [showDot]="true" status="success" class="me-2"> </d-badge>
                  <span>已派工</span>
                </div>
              </span>
              <span *ngIf="!rowItem.isAssign" class="me-3" dTooltip [content]="'未派工'">
                <div style="display: inline-block;">
                  <d-badge [showDot]="true" status="waiting" class="me-2"> </d-badge>
                  <span>未派工</span>
                </div>
              </span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem?.productionQuantity">{{rowItem.productionQuantity}}</span>
            </td>
            <td dTableCell>
              <d-progress [percentage]="(rowItem.qualifiedAmount/rowItem.productionQuantity)*100">
                <ng-template [dPosition]="'center'">
                  <div class="overflow-ellipsis" [title]="rowItem.qualifiedAmount+'/'+ rowItem.productionQuantity">{{
                    rowItem.qualifiedAmount }}/{{rowItem.productionQuantity}}</div>
                </ng-template>
              </d-progress>
            </td>
            <td dTableCell>
              <span dTooltip [content]="(rowItem.productionQuantity - rowItem.qualifiedAmount).toString()">
                {{rowItem.productionQuantity - rowItem.qualifiedAmount}}
              </span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.planStartTime">{{rowItem.planStartTime | date:"yyyy-MM-dd HH:mm:ss"}}</span>
            </td>
            <td dTableCell>
              <span dTooltip [content]="rowItem.planFinishTime">{{rowItem.planFinishTime | date:"yyyy-MM-dd HH:mm:ss"}}</span>
            </td>
          </tr>
        </ng-template>
      </tbody>
    </d-data-table>
  </div>
  <div class="page-footer">
    <div>
      <p>已选 <span class="underline">{{checkRows.length}}</span> 条
        <a (click)="cleared()" class="cleared">清空</a>
      </p>
    </div>
    <d-pagination [size]="'sm'" [canViewTotal]="true" [canChangePageSize]="true" [maxItems]="5"
      [total]="this.pager.total" [pageSizeOptions]="this.pageSizeOptions" [(pageSize)]="pager.pageSize"
      [(pageIndex)]="pager.pageIndex" (pageIndexChange)="pageIndexChange($event)"
      (pageSizeChange)="pageSizeChange($event)">
    </d-pagination>
  </div>
</div>
